<template>
  <div class="edit-container">
    <div class="section">
      <span>分居费：</span>
      <el-button-group>
        <el-upload class="upload-demo" style="display:inline-block!important;" action
                   accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                   :http-request="handleUploadForm1"
                   :headers="myHeaders" :show-file-list="false"
        >
          <el-button icon="el-icon-upload2" size="mini" type="primary"
                     style="margin-left:0;"
          >导入
          </el-button>
        </el-upload>
        <!--        <el-button icon="el-icon-upload2" size="mini" type="primary" @click="modalPicTap('2',1)" style="margin-left:0;">-->

        <!--        </el-button>-->
        <el-button icon="el-icon-download" size="mini" type="primary"
                   @click="getMuBan('/分居费导入模板.xls','分居费导入模板')" style="margin-left:0;"
        >模板下载
        </el-button>
      </el-button-group>
    </div>
    <div class="section">
      <span>随军未就业：</span>
      <el-button-group>
        <el-upload class="upload-demo" style="display:inline-block!important;" action
                   accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                   :http-request="handleUploadForm2"
                   :headers="myHeaders" :show-file-list="false"
        >
          <el-button icon="el-icon-upload2" size="mini" type="primary"
                     style="margin-left:0;"
          >导入
          </el-button>
        </el-upload>
        <!--        <el-button icon="el-icon-upload2" size="mini" type="primary" @click="modalPicTap('2',2)" style="margin-left:0;">-->
        <!--          随军未就业导入-->
        <!--        </el-button>-->
        <el-button icon="el-icon-download" size="mini" type="primary"
                   @click="getMuBan('/随军未就业导入模板.xls','随军未就业导入模板')" style="margin-left:0;"
        >模板下载
        </el-button>
      </el-button-group>
    </div>
    <div class="section">
      <span>子女保教费：</span>
      <el-button-group>
        <el-upload class="upload-demo" style="display:inline-block!important;" action
                   accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                   :http-request="handleUploadForm3"
                   :headers="myHeaders" :show-file-list="false"
        >
          <el-button icon="el-icon-upload2" size="mini" type="primary"
                     style="margin-left:0;"
          >导入
          </el-button>
        </el-upload>
        <!--        <el-button icon="el-icon-upload2" size="mini" type="primary" @click="modalPicTap('2',3)" style="margin-left:0;">-->
        <!--          子女保教费导入-->
        <!--        </el-button>-->
        <el-button icon="el-icon-download" size="mini" type="primary"
                   @click="getMuBan('/子女保教费导入模板.xls','子女保教费导入模板')" style="margin-left:0;"
        >模板下载
        </el-button>
      </el-button-group>
    </div>
    <div class="section">
      <span>父母赡养费：</span>
      <el-button-group>
        <el-upload class="upload-demo" style="display:inline-block!important;" action
                   accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                   :http-request="handleUploadForm4"
                   :headers="myHeaders" :show-file-list="false"
        >
          <el-button icon="el-icon-upload2" size="mini" type="primary"
                     style="margin-left:0;"
          >导入
          </el-button>
        </el-upload>
        <!--        <el-button icon="el-icon-upload2" size="mini" type="primary" @click="modalPicTap('2',4)" style="margin-left:0;">-->
        <!--          父母赡养费导入-->
        <!--        </el-button>-->
        <el-button icon="el-icon-download" size="mini" type="primary"
                   @click="getMuBan('/父母赡养费导入模板.xls','父母赡养费导入模板')" style="margin-left:0;"
        >模板下载
        </el-button>
      </el-button-group>
    </div>
    <div class="section">
      <span>未随军无工作配偶生活补贴：</span>
      <el-button-group>
        <el-upload class="upload-demo" style="display:inline-block!important;" action
                   accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                   :http-request="handleUploadForm5"
                   :headers="myHeaders" :show-file-list="false"
        >
          <el-button icon="el-icon-upload2" size="mini" type="primary"
                     style="margin-left:0;"
          >导入
          </el-button>
        </el-upload>
        <!--        <el-button icon="el-icon-upload2" size="mini" type="primary" @click="modalPicTap('2',6)" style="margin-left:0;">-->
        <!--          未随军无工作配偶生活补贴导入-->
        <!--        </el-button>-->
        <el-button icon="el-icon-download" size="mini" type="primary"
                   @click="getMuBan('/未随军无工作配偶生活补贴导入.xls','未随军无工作配偶生活补贴导入')"
                   style="margin-left:0;"
        >模板下载
        </el-button>
      </el-button-group>
    </div>
    <div class="section">
      <span>慰问、救济人员：</span>
      <el-button-group>
        <el-upload class="upload-demo" style="display:inline-block!important;" action
                   accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                   :http-request="handleUploadForm6"
                   :headers="myHeaders" :show-file-list="false"
        >
          <el-button icon="el-icon-upload2" size="mini" type="primary"
                     style="margin-left:0;"
          >导入
          </el-button>
        </el-upload>
        <!--        <el-button icon="el-icon-upload2" size="mini" type="primary" @click="modalPicTap('2',7)" style="margin-left:0;">-->
        <!--          慰问、救济人员导入-->
        <!--        </el-button>-->
        <el-button icon="el-icon-download" size="mini" type="primary"
                   @click="getMuBan('/慰问、救济人员导入.xls','慰问、救济人员导入')" style="margin-left:0;"
        >模板下载
        </el-button>
      </el-button-group>
    </div>
    <div class="section">
      <span>父母赡养补助申领人员：</span>
      <el-button-group>
        <el-upload class="upload-demo" style="display:inline-block!important;" action
                   accept="application/xls,application/xlsx" :before-upload="onBeforeUpload"
                   :http-request="handleUploadForm7"
                   :headers="myHeaders" :show-file-list="false"
        >
          <el-button icon="el-icon-upload2" size="mini" type="primary"
                     style="margin-left:0;"
          >导入
          </el-button>
        </el-upload>
        <!--        <el-button icon="el-icon-upload2" size="mini" type="primary" @click="modalPicTap('2',5)" style="margin-left:0;">-->
        <!--          父母赡养补助申领人员导入-->
        <!--        </el-button>-->
        <el-button icon="el-icon-download" size="mini" type="primary"
                   @click="getMuBan('/父母赡养补助申领人员导入.xls','父母赡养补助申领人员导入')" style="margin-left:0;"
        >模板下载
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>
<script>
import { importEnjoy } from '@/api/enjoy'
import { exportTest } from '@/utils/utils'
import { getToken } from '@/utils/auth'
import * as personApi from '@/api/person'

export default {
  components: {},
  data() {
    return {
      myHeaders: { 'X-Token': getToken() }
    }
  },
  mounted() {

  },
  methods: {
    handleUploadForm1(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 1)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      importEnjoy(formData)
        .then((res) => {
          console.log(res)
          let msg = res.join(', ')
          this.$message.info(msg)
          loading.close()
          this.closeAndRefresh()
        }).finally(() => {
        loading.close()
        this.closeAndRefresh()
      })
        .catch((error) => {
          console.error('导入失败：', error)
          this.$message.error('导入失败，请重试！')
          loading.close()
          this.closeAndRefresh()
        })
    },
    handleUploadForm2(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 2)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      importEnjoy(formData)
        .then((res) => {
          console.log(res)
          let msg = res.join(', ')
          this.$message.info(msg)
          loading.close()
          this.closeAndRefresh()
        }).finally(() => {
        loading.close()
        this.closeAndRefresh()
      })
        .catch((error) => {
          console.error('导入失败：', error)
          this.$message.error('导入失败，请重试！')
          loading.close()
          this.closeAndRefresh()
        })
    },
    handleUploadForm3(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 3)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      importEnjoy(formData)
        .then((res) => {
          console.log(res)
          let msg = res.join(', ')
          this.$message.info(msg)
          loading.close()
          this.closeAndRefresh()
        }).finally(() => {
        loading.close()
        this.closeAndRefresh()
      })
        .catch((error) => {
          console.error('导入失败：', error)
          this.$message.error('导入失败，请重试！')
          loading.close()
          this.closeAndRefresh()
        })
    },
    handleUploadForm4(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 4)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      importEnjoy(formData)
        .then((res) => {
          console.log(res)
          let msg = res.join(', ')
          this.$message.info(msg)
          loading.close()
          this.closeAndRefresh()
        }).finally(() => {
        loading.close()
        this.closeAndRefresh()
      })
        .catch((error) => {
          console.error('导入失败：', error)
          this.$message.error('导入失败，请重试！')
          loading.close()
          this.closeAndRefresh()
        })
    },
    handleUploadForm5(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 5)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      importEnjoy(formData)
        .then((res) => {
          console.log(res)
          let msg = res.join(', ')
          this.$message.info(msg)
          loading.close()
          this.closeAndRefresh()
        }).finally(() => {
        loading.close()
        this.closeAndRefresh()
      })
        .catch((error) => {
          console.error('导入失败：', error)
          this.$message.error('导入失败，请重试！')
          loading.close()
          this.closeAndRefresh()
        })
    },
    handleUploadForm6(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 6)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      importEnjoy(formData)
        .then((res) => {
          console.log(res)
          let msg = res.join(', ')
          this.$message.info(msg)
          loading.close()
          this.closeAndRefresh()
        }).finally(() => {
        loading.close()
        this.closeAndRefresh()
      })
        .catch((error) => {
          console.error('导入失败：', error)
          this.$message.error('导入失败，请重试！')
          loading.close()
          this.closeAndRefresh()
        })
    },
    handleUploadForm7(param) {
      console.log(param)
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('type', 7)
      let loading = this.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      importEnjoy(formData)
        .then((res) => {
          console.log(res)
          let msg = res.join(', ')
          this.$message.info(msg)
          loading.close()
          this.closeAndRefresh()
        }).finally(() => {
        loading.close()
        this.closeAndRefresh()
      })
        .catch((error) => {
          console.error('导入失败：', error)
          this.$message.error('导入失败，请重试！')
          loading.close()
          this.closeAndRefresh()
        })
    },
    onBeforeUpload(file) {
      const isEXCEL = file.type === 'application/xls' || 'application/x-xls' || 'application/zip' || 'application/rar'
      const isLt1M = file.size / 1024 / 1024 < 100

      if (!isEXCEL) {
        this.$message.error('上传文件只能是EXCEL格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 100MB!')
      }
      return isEXCEL && isLt1M
    },
    getMuBan(url, fileName) {
      exportTest(url, fileName)
    },
    modalPicTap(tit, type, num, i) {
      this.$modalUpload((img) => {
        if (tit === '2' && !num) {
          let errorNum = 0
          img.forEach((item) => {
            if (item.attType !== 'xlsx' && item.attType !== 'xls') {
              errorNum++
            }
          })
          if (errorNum > 0) {
            return this.$message.warning('导入文件必须都是后缀名为xlsx或xls的EXCEL文件！')
          }
          if (img.length > 10) {
            return this.$message.warning('最多选择10个文件！')
          }
          let fileUrls = img.map((item) => item.attDir)
          let loading = this.$loading({
            lock: true,
            text: '导入中，请稍候...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          importEnjoy({ file: fileUrls.join(','), type })
            .then((res) => {
              console.log(res)
              let msg = res.join(', ')
              this.$message.info(msg)
              loading.close()
              this.closeAndRefresh()
            }).finally(() => {
            loading.close()
            this.closeAndRefresh()
          })
            .catch((error) => {
              console.error('导入失败：', error)
              this.$message.error('导入失败，请重试！')
              loading.close()
              this.closeAndRefresh()
            })
        }
      }, tit, 'store')
    },
    closeAndRefresh() {
      this.$emit('handlerOpenEdit1')
    }
  }
}
</script>
<style scoped>
.edit-container {
  display: flex;
  flex-direction: column;
}

.section {
  margin-bottom: 20px;
}

span {
  margin-right: 10px;
}

.el-button-group {
  margin-top: 10px;
}

.el-button-group .el-button {
  margin-right: 10px;
}
</style>
